<!--
* @description 
* @fileName batteryData.vue
* @author yanghong
* @date 2021/07/16 11:28:32
!-->
<template>
  <div class="batteryData-container">
    <el-dialog
      :title="$t('Battery_capacity')"
      :visible="visibleShow"
      class="el-dialog-sm"
      @open="settingnewBatteryInfo"
      @close="()=>{$store.commit('setVisibleShow',false);energy='';this.msg=''}"
      >
      <p v-loading="loading">
        <span class="value">
          {{energy}}
          <a v-if='energy' href="javascript:;"  v-copy='energy'>{{$t('API.copy')}}</a>
        </span>
        <span v-show="msg">{{msg}}</span>
      </p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    batteryData:{}
  },
  data () {
    return {
      energy:'',
      msg:'',
      loading:false
    }
  },
  computed: {
    visibleShow(){
      return this.$store.state.sysStore.visibleShow
    }
  },
  mounted(){
  },
  methods: {
    async settingnewBatteryInfo(){
      this.loading = true
      let res = await this.API.settingnewBatteryInfo({
        wifiSn:this.batteryData.wifiSn,
        inverterSn:this.batteryData.inverterSn
      })
      this.loading = false
      if(res.success){
        this.energy = res.result
        this.msg=''
      }else{
        this.energy=''
        if(res.code == '1'){
          this.msg = this.$t('Battery_off_line')
        }else if(res.code == '2'){
          this.msg = this.$t('Program_exception')
        }
      }
    }
  }
}

</script>
<style lang='less'>
.batteryData-container{
  p{
    text-align: center;
    min-height: 30px;
    line-height: 30px;
    .value{
      display: block;
      text-align: left;
    }
  }
}
</style>